<template>
  <div class="wrapper">
    <!-- :modal-append-to-body='false' -->

    <el-dialog title="工单信息"
    :append-to-body='true'
    :visible.sync="dialogVisible" :before-close="handleCancel" center modal width="30%">
      <el-form ref="editFormRef"
      :model="queryParams" labelWidth="150px"
      :rules="rules" size="small" class="formDiv">
        <el-form-item label="工单类型"
          :label-width="labelWidth"
          class="line"
          prop="ordersTypeNo">
          <el-select
            class="selectWidth"
            v-model="queryParams.ordersTypeNo"
            clearable
            placeholder="请选择工单类型"
            filterable>
            <el-option
              v-for="item in orderTypeList"
                :key="item.typeNo"
                :label="item.typeName"
                :value="item.typeNo"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工单等级"
          :label-width="labelWidth"
          class="line"
          prop="ordersLevel">
          <el-select
              clearable
              class="selectWidth"
              placeholder="请选择工单等级"
              v-model="queryParams.ordersLevel"
            >
              <el-option
                v-for="item in ordersLevelList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave('editFormRef')" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderType, createWorkOrder } from '@/views/children/alarm/js/alarm.js'
export default {
  components: {},
  data () {
    return {
      labelWidth: '120px',
      dialogVisible: false,
      flag: '',
      queryParams: {},
      orderTypeList: [],
      ordersLevelList: [
        { id: 1, name: '一星' },
        { id: 2, name: '二星' },
        { id: 3, name: '三星' },
        { id: 4, name: '四星' },
        { id: 5, name: '五星' }
      ],
      rules: {
        ordersTypeNo: [{ required: true, message: '请选择工单类型' }],
        ordersLevel: [{ required: true, message: '请选择工单等级' }]
      }
    }
  },
  computed: {},
  methods: {
    open (id, flag = '') {
      if (flag !== '') {
        this.flag = flag
      }
      this.dialogVisible = true
      this.queryParams.id = id
    },
    async getOrderType () {
      const { code, data, msg } = await getOrderType()
      if (code === 0) {
        this.orderTypeList = data
      } else {
        this.$message.warning(msg)
      }
    },
    handleCancel () {
      this.dialogVisible = false
    },
    handleSave (editFormRef) {
      this.$refs.editFormRef.validate(async valid => {
        if (valid) {
          this.creatWorkerOrder(this.queryParams)
        }
      })
    },

    async creatWorkerOrder (query) {
      let { code, data, msg } = await createWorkOrder(query)
      if (code === 0) {
        this.$message.success('操作成功')
        if (this.flag) {
          this.$emit('ok', data)
        } else {
          this.$emit('ok')
        }
        this.handleCancel()
      } else {
        this.$message.error(msg)
      }
    }

  },
  mounted () {
    this.getOrderType()
  }
}
</script>
<style scoped>
.line{
  display: inline-block;
  width: 350px;
}
.selectWidth {
  width: 290px;
}
</style>
